<template>
    <div class="body">
        <div v-if="$store.state.isSetting">
                <div class="top">
        <div class="top1" @click="handleLogin">
           <img :src="$store.state.identity.userHead" alt="">
        </div>
        <div class="top2"  @click="handleLogin">
          {{$store.state.identity.nickname ? $store.state.identity.nickname : $store.state.identity.username}}
        </div>
        <div class="top3" v-if="$store.state.identity.isAdmin"><a href="/admin" target="_blank"><span>管理员</span></a> </div>
      </div>
      <div class="order">
        <ul>
          <li @click="handleOrder">
            <img src="" alt="">
            <div>
              电影订单
            </div>
          </li>
          <li>
            <img src="" alt="">
            <div>
              商品订单
            </div>
          </li>
        </ul>
      </div>
      <div class="list" @click="handleCard">
        <img class="img1" src="" alt="">
        <span>卖座券</span>
        <img class="img2" src="" alt="">
      </div>
      <div class="list" @click="handleRedPacket">
        <img class="img1" src="" alt="">
        <span>组合红包</span>
        <img class="img2" src="" alt="">
      </div>
      <div class="list" @click="handleBalance">
        <img class="img1"  src="" alt="">
        <span>余额</span>
        <div class="r list-balance">
          <span class="list-balance-span">
            <i>￥</i>
            <span>0</span>
          </span>
          <img class="img2" src="" alt="">
        </div>
      </div>
      <div class="list" @click="handleSet">
        <img class="img1" src="" alt="">
        <span>设置</span>
        <img class="img2" src="" alt="">
      </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  // 局部路由拦截
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    axios.get('/api/users/getUser').then((res) => {
      if (res.data.status === 0) {
        next(vm => { // 使用vm作为回调函数，便可以用vm代替this，实现this的功能
          var username = res.data.user[0].username
          var isAdmin = res.data.user[0].isAdmin
          var userHead = res.data.user[0].userHead + '?' + Math.random()
          var birthdate = res.data.user[0].birthdate
          var nickname = res.data.user[0].nickname
          var sex = res.data.user[0].sex
          var id = res.data.user[0].id
          localStorage.setItem('username', username)
          localStorage.setItem('isAdmin', isAdmin)
          localStorage.setItem('userHead', userHead)
          localStorage.setItem('birthdate', birthdate)
          localStorage.setItem('nickname', nickname)
          localStorage.setItem('sex', sex)
          localStorage.setItem('id', id)
          vm.$store.commit('getUsername', { username, isAdmin, userHead, birthdate, nickname, sex, id })
        })
      } else {
        next('/login')
      }
    })
  },
  data () {
    return {
      // isSetting: true
    }
  },
  methods: {
    handleLogin () {
      this.$router.push('/material')
    },
    handleSet () {
      this.$store.commit('isSetting', false)
      this.$router.push('/center/setting')
    },
    handleOrder () {
      this.$store.commit('isTabbrshow', false)
      this.$router.push('/user/order')
    },
    handleCard () {
      this.$store.commit('isTabbrshow', false)
      this.$router.push('/user/card')
    },
    handleRedPacket () {
      this.$store.commit('isTabbrshow', false)
      this.$router.push('/user/redPacket')
    },
    handleBalance () {
      this.$store.commit('isTabbrshow', false)
      this.$router.push('/user/balance')
    }
  },
  beforeMount () {
    this.$store.commit('isTabbrshow', true)
    this.$store.commit('isSetting', true)
  }
}
</script>
<style lang="scss" scoped>
.r{
  float: right;
}
.body{
  background: #F6F6F6;
  height: 100vh;
}
.top{
  width:100%;
  height: 55.556vw;
  background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.6837f67.png);
  margin-top: -12.222vw;
  height: 55.556vw;
  padding-left: 6.111vw;
  padding-top: 17.778vw;
  box-sizing: border-box;
  .top1{
    width:18.611vw;
    height:18.611vw;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    top:50%;
    transform: translateY(-9.444vw);
    img{
      width: 100%;
    }
  }
  .top2{
    position: relative;
    margin-left: 25vw;
    top: -2.778vw;
    font-size: 4.444vw;
    color: #fff;
  }
  .top3{
    font-size: 2.778vw;
    margin-left: 5vw;
    position: relative;
    top:5.556vw;
    a{
      color: wheat;
    }
  }
}
.order{
  width:100%;
  background: white;
  ul{
    height: 21.944vw;
    padding:4.167vw 0 3.889vw 0;
    box-sizing: border-box;
    width:100%;
    display: flex;
    margin-bottom: 2.778vw;
    li{
      flex: 1;
      height: 13.889vw;
      img{
        width:7.222vw;
        height: 7.222vw;
        margin: 0 auto;
        margin-bottom: 1.667vw;
      }
      div{
        font-size: 3.611vw;
        text-align: center;
      }
    }
  }
}
.list{
  color: #2c3e50;
  width:100%;
  height:13.611vw;
  background: white;
  padding: 0 4.167vw;
  box-sizing: border-box;
  border-bottom: 0.278vw solid #ededed;
  overflow: hidden;
  .img1{
    display: inline-block;
    width:5.556vw;
    position: relative;
    top:1.389vw;
  }
  span{
    margin-left: 4.167vw;
    line-height: 13.611vw;
  }
  .img2{
    float: right;
    width:1.667vw;
    height: 2.778vw;
    position: relative;
    top:5.833vw;
  }
  .list-balance{
    .list-balance-span{
      color: #797d82;
      i{
        font-size: 3.056vw;
        font-style: normal
      }
      span{
        font-size: 4.167vw;
        margin-left: 0;
        padding-right: 3.889vw;
      }
    }
  }
}
</style>
